<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <h2>{{title}}</h2>
        <input type="button" value="增加1" v-on:click="arr.push('篮球')">
        <input type="button" value="增加2" v-on:click="add" />
        <input type="button" value="增加3" @click="add2" />
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    
    const {createApp} = Vue;

    createApp({
        data(){
            return {
                title: "事件绑定",
                arr: ["排球"]
            }
        },
        methods:{
            add(){
                this.arr.push("足球");
            },
            add2(){
                this.arr.push("乒乓球");
                this.log();
                console.log(this)
            },
            log(){
                console.log("hello log");
            }
        }
    }).mount(".box");



</script>
</html>